<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="queryParam.id" placeholder="评论ID" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="queryParam.userName" placeholder="用户姓名" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="queryParam.spuName" placeholder="商品名称" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="queryParam.content" placeholder="评论内容" />
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 4 || 24" :sm="12" :xs="24">
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
            >
              <a-button type="primary" @click="search()" icon="search" style="margin-left:10px;">查找</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table ref="table" rowKey="key" :columns="commentColumns" :dataSource="commentData" :pagination="pagination" bordered>
      <span slot="use" slot-scope="text, record" class="">
        <a-button type="danger"
        class="table-danger flyray-btn" @click="deleteRow(record)"
        >删除</a-button>
      </span>
    </a-table>
  </a-card>
</template>
<script>
import { getList, deleteAppraise} from '@/api/mall/comment'
import { commentColumns } from '@/const/crud/mall/comment.config'
export default {
  components: {
  },
  data() {
    return {
      commentColumns,
      advanced: false,
      parameter: {
        pageNo: 1,
        pageSize: 10,
        limit: 10
      },
      commentData: [],
      queryParam: {
        id: null,
        userName: '',
        spuName: '',
        content: ''
      },
      pagination: {
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: total => `共有${total}条`
      }
    }
  },
  methods: {
    getCommentData() {
      getList(Object.assign(this.parameter)).then(res => {
        this.commentData = res.data.items
        this.pagination.total = res.data.total

      })
    },
    search() {
      this.parameter.id       = this.queryParam.id
      this.parameter.userName = this.queryParam.userName
      this.parameter.spuName  = this.queryParam.spuName
      this.parameter.content  = this.queryParam.content
      this.getCommentData()
    },
    //删除
    deleteRow(val) {
      // console.log(val)
      var _this = this
      this.$confirm({
        title: '提示',
        content: `此操作将永久删除评论--- ${val.id} ---,是否继续?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          let params = {
            'id':val.id,
          }          
          deleteAppraise(Object.assign(params)).then(res=>{
            _this.getCommentData()
          })
        }
      })
    }
  },
  created() {
    this.getCommentData()
  }
}
</script>
<style scoped>
.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
</style>